<template>
  <div>
    <!--  #####################查询条件###################  -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="客户(商圈)">
              <a-select v-model="queryParam.parentCode" allowClear>
                <a-select-option v-for="item in companys" :key="item.code">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="用户昵称">
              <a-input v-model="queryParam.nickName" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="手机号码">
              <a-input v-model="queryParam.mobile" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons"
                  :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button v-action:query type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--  #####################查询条件###################  -->

    <!--  #####################操作###################  -->
    <!--    <div class="table-operator">-->
    <!--      <a-button v-action:add type="primary" icon="plus" @click="$refs.createModal.add()">新建</a-button>-->
    <!--    </div>-->
    <!--  #####################操作###################  -->

    <!--  #####################表格###################  -->
    <s-table
      ref="table"
      :columns="columns"
      :data="loadData"
      bordered
    >
      <span slot="fileUrl" slot-scope="text, record">
        <div class="dfhead">
          <img :src="text" alt="" style="width: 50px;height: auto;">
        </div>
      </span>
      <a-tag slot="status" slot-scope="text, record" :color="text == 2 ? '#108ee9' : '#f50'">
        {{text | statusFilter}}
      </a-tag>
      <span slot="gender" slot-scope="text,record">
        {{record.gender==2?'女':'男'}}
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-action:edit @click="handleEdit(record)">积分补录</a>
          <a-divider v-action:edit type="vertical" />
          <a v-action:edit @click="handleTrade(record)">支付记录</a>
          <a-divider v-action:edit type="vertical" />
          <a v-action:edit @click="handleOrder(record)">核销记录</a>
        </template>
      </span>
    </s-table>
    <!--  #####################表格###################  -->

    <!--  #####################打开的页面###################  -->
    <store-edit ref="createModal" @ok="handleOk"/>
    <!--  #####################打开的页面###################  -->
  </div>
</template>

<script>
  import moment from 'moment'
  import { STable } from '@/components'
  import storeEdit from './memberEdit'
  import { selectAllCustomer } from '@/api/shop/customer'
  import { selectPage } from '@/api/shop/member'

  const typeMap = {
    1: {
      status: '',
      text: '免费代金券'
    },
    2: {
      status: '#87d068',
      text: '收费代金券'
    },
    3: {
      status: '#2db7f5',
      text: '积分代金券'
    }
  }
  export default {
    name: 'memberList',
    components: {
      STable,
      storeEdit
    },
    data () {
      return {
        mdl: {},
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        companys: [],
        // 表头
        columns: [
          {
            title: '微信头像',
            dataIndex: 'avatarUrl',
            scopedSlots: { customRender: 'fileUrl' }
          },
          {
            title: '微信昵称',
            dataIndex: 'nickName'
          },
          {
            title: '手机',
            dataIndex: 'mobile'
          },
          {
            title: '积分',
            dataIndex: 'integral'
          },
          {
            title: '注册时间',
            dataIndex: 'createdTime',
            sorter: true
          },
          {
            title: '性别',
            dataIndex: 'gender',
            scopedSlots: { customRender: 'gender' }
          },
          {
            title: '商圈名称',
            dataIndex: 'customerName'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '250px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return selectPage(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res.result
            })
        }
      }
    },
    filters: {
      statusFilter (isDisabled) {
        const statusMap = {
          1: '未上架',
          2: '已上架'
        }
        return statusMap[isDisabled]
      },
      typeFilter (type) {
        return typeMap[type].text
      },
      typeColorFilter (type) {
        return typeMap[type].status
      }
    },
    created () {
      selectAllCustomer().then(res => {
        this.companys = res.result
      })
    },
    methods: {
      handleEdit (record) {
        this.$refs.createModal.edit(record)
      },
      handleTrade (record) {
        this.$emit('onEdit', record)
      },
      handleOrder (record) {
        this.$emit('onOrder', record)
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      resetSearchForm () {
        this.queryParam = {
          date: moment(new Date())
        }
      }
    }
  }
</script>
<style scoped>
  .dfhead{
    width: 50px;
    height: 50px;
    background: url("../../assets/icons/dfhead.png") no-repeat center;
    background-size: 50px;
    border-radius: 25px;
    overflow: hidden;
  }
</style>